<template>
  <el-card>
    <i-ep-close
      v-show="!panelSetIcon"
      class="el-icon-close"
      style="float: right; padding: 3px 0"
      @click="deletePanelItem"
    />
    <!-- iframe 模块-->
    <iframe
      :src="urlPath"
      width="100%"
      height="100%"
      frameborder="0"
      scrolling="auto"
    ></iframe>
  </el-card>
</template>

<script lang="ts" setup name="DemoFineReport">
import request from "@/utils/request";
import { encodeSearchParams } from "@/utils/index";
const emit = defineEmits(["deletePanelItemEvent"]);

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, url, params } = toRefs(props);

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

// 定义iframe url参数
const host = import.meta.env.VITE_APP_FREPORT_HOST;
const urlPath = ref("");

// 定义report传参
// 用户查询.cpt
const query = reactive({
  viewlet: params.value?.viewlet ?? "用户查询.cpt",
  __showtoolbar__: false,
  ssoToken: "",
});

// 获取路由参数
onMounted(() => {
  getSsoToken();
});

async function getSsoToken() {
  try {
    const { data } = await request({
      url: `/system/fineReport/buildSsoToken`,
      method: "post",
      data: {
        userName: "admin",
      },
    });
    query.ssoToken = data;
    getFineReport();
  } catch (error) {
    alert("token获取失败，请重新尝试");
  }
}

// 生成 FineReport url 方法
function getFineReport() {
  const params = encodeSearchParams(query);
  console.log("params", params);
  params && (urlPath.value = `${host}/decision/view/report?${params}`);
  console.log("url.value", urlPath.value);
}
</script>

<style lang="scss" scoped>
.el-card {
  height: 100%;
}
.el-card-title {
  font-weight: bold;
  font-size: 14px;
  color: lightslategrey;
}
:deep(.el-card__body) {
  height: 100% !important;
  padding: 0 !important;
}
:deep(.el-card__header) {
  padding: 10px;
}
</style>
